<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 1240px;
            margin: 25px auto;
        }

        .tu {
            width: 18%;
            height: 70px;
            float: left;
        }

        .tu img {
            width: 100%;
        }

        .sou {
            width: 82%;
            padding-left: 100px;
            box-sizing: border-box;
            float: left;
        }

        ul {
            list-style: none;
        }

        .txt {
            width: 60%;
            height: 35px;
            float: left;
            border: #F03726 3px solid;
            outline: none;
        }

        .btn {
            width: 100px;
            height: 41px;
            margin-left: -8px;
            margin-bottom: -10px;
            font-size: 20px;
            float: left;
            color: white;
            background-color: #F03726;
            border: #F03726 1px solid;
            cursor: pointer;
            outline: none;
        }

        .nav {
            margin-top: 10px;
        }

        .nav li {
            cursor: pointer;
            float: left;
            font-size: 13px;
            color: #A8A8C5;
            margin-left: 25px;
        }

        .nav li:first-child {
            margin-left: 0px;
        }

        .nav li.cur {
            color: #F03726;
        }

        .nav li:hover {
            border-bottom: #F03726 1px solid;
            color: #F03726;
        }

        .so {
            width:1240px;
            height: 40px;
            margin: 25px auto;
            line-height: 40px;
            border: solid 1px #D8D8D8;
        }

        .small,
        .big {
            width: 40px;
            height: 20px;
            outline: none;
        }

        .aa {
            width: 270px;
            height: 40px;
            float: left;
            padding: 0 20px;
            box-sizing: border-box;
            border-right: solid 1px #D8D8D8;
        }

        .fl {
            float: right;
        }

        .sheng {
            float: right;
            margin-right: 20px;
        }

        .litre,
        .drop{
            width: 50px;
            height: 20px;
            background-color: white;
            border: solid 1px #D8D8D8;
            color: black;
            cursor: pointer;
            outline: none;
        }

        .content {
            width: 1240px;
            display: flex;
            flex-wrap: wrap;
            /* height: 500px; */
            margin: 25px auto;
            border: solid 1px #F2F2F2;

        }

        .s1 {
            cursor: pointer;
            width: 20%;
            border: solid 1px #F2F2F2;
            box-sizing: border-box;
            /* height: 300px; */
        }

        .s1:hover {
            border: solid 1px red;
        }

        .s1 img {
            width: 80%;
            margin-top: 20px;
            margin-left: 10%;
        }

        .tx {
            width: 80%;
            height: 40px;
            font-size: 14px;
            margin-left: 10%;
            line-height: 0.7 rem;
            color: #9B9B9B;
            overflow: hidden;
            /** 隐藏超出的内容 **/
            word-break: break- all;
            text-overflow: ellipsis;
            /** 多行 **/
            display: -webkit-box;
            /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical;
            /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2;
            /** 显示的行数 **/
            margin-bottom: 0. 3 rem;
        }

        .jia {
            margin-left: 10%;

        }

        .j1 {
            font-size: 20px;
            color: red;
        }

        .j2 {
            color: gainsboro;
        }
        .que{
            width: 50px;
            height: 25px;
            background-color: #FF4400;
            border: solid 1px #FF4400;
            color: white;
            cursor: pointer;
            border-radius: 10px;
            outline: none;
          
        }
        .wei{
            border-top: #F2F2F2 solid 1px;
            padding-top: 15px;
            box-sizing: border-box;
            width: 80%;
            margin: 10px auto;
            height: 40px;
        }
        .wei span{
            float: right;
            color: #9B9B9B;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="tu"><img src="./img/1.png"></div>
        <div class="sou">
            <input type="text" class="txt" placeholder="女装">
            <input type="button" value="搜索" class="btn">
            <div style="clear:both"></div>
            <ul class="nav">
                <li class="cur">一淘限时抢</li>
                <li>玩具</li>
                <li>冰箱</li>
                <li>斜挎包</li>
                <li>零食</li>
                <li>剃须刀</li>
                <li>女袜</li>
                <li>新款包</li>
                <li>衬衣</li>
                <li>电器</li>
            </ul>
        </div>
    </div>
    <div style="clear:both"></div>

    <!-- 查找部分 -->
    <div class="so">
        <div class="aa">
            价格区间
            <div class="fl">

                <input type="text" class="small" placeholder="￥">
                -
                <input type="text" class="big" placeholder="￥">
                <button class="que">确定</button>
            </div>
        </div>
        <div class="sheng">
            <button class="litre">升序</button>
            <button class="drop">降序</button>
        </div>

    </div>
    <!-- 内容 -->
    <div class="content">
        
    </div>
</body>

</html>
<script>
    //数据
    let data = [{
            type: '柏宝妮2020新款进口整皮狐狸毛皮草外套女中长款秋冬高端裘皮大衣',
            img: './img/22.png',
            txt: '女装',
            jg: 1930.00,
            yj: 3960.00,
            yx:122
        },
        {
            type: '花花公子羽绒服男2020年新款保暖立领轻便男士外套冬季加厚中长款',
            img: './img/26.png',
            txt: '男装',
            jg: 539.00,
            yj: 1098.00,
            yx:666
        },
        {
            type: '2020秋冬新款皮草皮狐狸毛坎肩韩版中长款中长款外套背心马夹显瘦',
            img: './img/2.png',
            txt: '女装',
            jg: 2080.00,
            yj: 3160.00,
            yx:888
        },
        {
            type: 'ONLY2020冬季新款简约保暖时尚中长款连帽羽绒服女|120412022',
            img: './img/23.png',
            txt: '女装',
            jg: 999.00,
            yj: 1999.00,
            yx:798
        },
        {
            type: 'FILA斐乐童装儿童羽绒服2020冬季新款男女童加厚洋气羽绒外套上衣',
            img: './img/25.png',
            txt: '童装',
            jg: 1259.00,
            yj: 1450.00,
            yx:789
        },
        {
            type: '花花公子羽绒服男2020年新款保暖立领轻便男士外套冬季加厚中长款',
            img: './img/27.png',
            txt: '男装',
            jg: 859.00,
            yj: 1892.00,
            yx:256
        },
        {
            type: 'ONLY【关晓彤同款】2020冬季新款亮面连帽短款羽绒服女|120423004',
            img: './img/12.png',
            txt: '女装',
            jg: 979.00,
            yj: 1399.00,
            yx:156
        }, {
            type: '儿童羽绒服男童中长款白鸭绒冬季新款韩版迷彩冬装童装外套',
            img: './img/24.png',
            txt: '童装',
            jg: 198.00,
            yj: 316.00,
            yx:949
        }, {
            type: '胖妈妈秋冬装外套中年女羽绒棉服加肥加大码中老年棉衣中长款棉袄',
            img: './img/28.png',
            txt: '中年装',
            jg: 398.00,
            yj: 799.00,
            yx:99
        }, {
            type: '妈妈棉衣女短款冬装中老年人羽绒棉服外套轻便中年妇女轻薄小棉袄',
            img: './img/29.png',
            txt: '中年装',
            jg: 99.00,
            yj: 500.00,
            yx:10
        }
    ]


    
   render(data);
   function render(arr) { //arr 形参 // 渲染函数
    let content = select('.content');
    // content.innerHTML = '<b>123</b>'
    // console.log(content.innerHTML);
    let str = '';
    arr.forEach(item => {
        str+=`<div class="s1">
            <img src="${item.img}" alt="">
            <div class="tx">
                ${item.type}
            </div>
            <div class="jia">
                <span class="j1">￥${item.jg}</span>
                <span class="j2"><s>￥${item.yj}</s></span>
            </div>
            <div class="wei">
                <span>月销${item.yx}</span>
            </div>
        </div>`
    })
    content.innerHTML = str;
   }








   select('.btn').onclick = function(){ // 搜索
  let txt = select('.txt').value;
  let list = data.filter(item => item.txt.includes(txt));
//   console.log(list);
  render(list);
}



select('.que').onclick = function () { // 价格区间的
    let small = select('.small').value;
    let big = select('.big').value;
    // console.log(small);
    // console.log(big);
    let list = data.filter(item => item.jg>=small && item.jg<= big);
    render(list);
}



select('.litre').onclick = function(){ // 升序
   let list = data.sort((a,b) => a.yx - b.yx);
   render(list);
}

select('.drop').onclick = function(){ // 降序
    let list = data.sort((a,b) => b.yx - a.yx);
   render(list);
}



function select (val){
  return document.querySelector(val);
}
// 获取节点，添加事件。
// document 相当于 html
// let dom = document.querySelector('div');

</script>